<template >
  <div id="pages" v-if="total_page > 1">
    <div v-if="page > 1">
      <a @click="reducePage()"> &gt; </a>
    </div>
    <div v-for="(item, index) in total_page" :key="index">
      <a :class="{ current: item === page }" @click="clickPage(item)">{{
        page
      }}</a>
    </div>
    <div v-if="page < total_page">
      <a @click="addPage()"> &gt; </a>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    page: {
      type: Number,
      default: 1
    },
    total_page: {
      type: Number,
      default: 1
    }
  },
  methods: {
    clickPage(page) {
      this.$emit('clickPage', page)
    },
    addPage() {
      this.clickPage(this.page + 1)
    },
    reducePage() {
      this.clickPage(this.page - 1)
    },
  },
}
</script>
<style lang="scss" scoped>
</style>